<template>
  <div class="xuqiubox">
    <!-- 内容 -->
    <Tabs :dataSource="dataSource">
      <template #header>
        <p class="d_f fs_12" style="color: #cbd2d5">
          <span class="mr_10">2021-11-15 ~ 2021-11-21</span>
          <a-dropdown>
            <p @click.prevent>
              <span class="fs_12">近三十天</span>
              <DownOutlined />
            </p>
            <template #overlay>
              <a-menu>
                <a-menu-item />
              </a-menu>
            </template>
          </a-dropdown>
        </p> </template
    ></Tabs>
    <!-- 关系图 -->
    <!-- <img class="slotImg" src="@/assets/lexiconStatistics/slotImg1.png" alt="" /> -->
    <div class="echart-box">
      <div id="mapBox" ref="mapBox"></div>
      <div class="line-box">
        <Tabs :dataSource="menuList">
          <template #header>
        
          </template>
        </Tabs>
        <div id="lineBox" ref="lineBox"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Tabs from "@/components/Tabs";
import * as echarts from "echarts";
import "echarts-gl"; 
import { echartsAutoPlay } from "@/utils/echarts";
import '../../../../../node_modules/echarts/map/js/china.js';
import chinaMap from "../../../../../node_modules/echarts/map/json/china.json";

const menuList = ref(["省份", "区域", "城市"]);

const dataSource = ref(["地域分布"]);

const mapBox = ref();
const lineBox = ref();
onMounted(() => {
  // 初始化图表
  setMapEcharts();
  setLineEcharts();
});


function setMapEcharts() {
  echarts.registerMap("china", { geoJSON: chinaMap });
  var myChart = echarts.init(mapBox.value);
  var option = {
    visualMap: {//颜色的设置  dataRange
        textStyle: {color:'#fff'},
        icon: "rect",
        x: 'left',
        bottom: '5%',
        itemWidth: 10,  // 设置宽度
        itemHeight: 10, // 设置高度
        splitList: [
            {start: 1500},{start: 900, end: 1500},
            {start: 310, end: 1000},{start: 200, end: 300},
            {start: 0, end: 200},
        ],
        color: ['#01CBFE', '#0391b5', '#056b84','#074454', '#081E23']  
    },
    series : [
        {
          name: '地域分布',
          type: 'map',
          mapType: 'china',
          zoom: 1.1,
          roam: false,//是否开启鼠标缩放和平移漫游
          itemStyle:{//地图区域的多边形 图形样式
              normal:{//是图形在默认状态下的样式
                  label:{
                      show: false,
                      textStyle: {color: "rgb(249, 249, 249)"}
                  }
              },
              emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                  label:{show: false},
                  areaColor: '#01CBFE'
              }
          },
          //组件距离容器的距离
          top:"60",
          bottom:"60",
          left:"60",
          data:[
              {name: '北京',value: '100' },{name: '天津',value: randomData() },  
              {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
              {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
              {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
              {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
              {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
              {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
              {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
              {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
              {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
              {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
              {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
              {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
              {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
              {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
              {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
              {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
          ]
        }
    ]
  }
  myChart.setOption(option);
}

//中国地图
function randomData() {  
  return Math.round(Math.random()*400);  
}

function setLineEcharts() {
  var xDataList = []
  var yDataList = []
  xDataList = [987, 960, 870, 850, 799, 987, 960, 870, 850, 799];
  yDataList = [
    "广东",
    "山东",
    "江苏",
    "浙江",
    "河南",
    "河北",
    "四川",
    "北京",
    "湖南",
    "湖北"
  ];
  var myChart = echarts.init(lineBox.value);
  var option = {
    tooltip: {
      trigger: "axis",
      extraCssText: "z-index:999",
      confine: true,
      backgroundColor: "rgba(255,255,255,0.8)",
    },
    grid: {
      top: "12%",
      left: '-5%',
      right: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        inverse: true,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: yDataList,
        axisLabel: {
          width: 300,
          margin: 100,
          color: "#CBD2D5",
          fontSize: 14,
          align: "left",
          formatter: function (value: string, index: number) {
            var maxLength = 8;
            var valLength = value.length;
            var rowN = Math.ceil(valLength / maxLength);
            if (rowN > 1) {
              return `${index + 1}  ` + value.substring(0, 8) + "...";
            } else {
              return `${index + 1}  ` + value;
            }
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: 10, // 柱子宽度
        label: {
          show: true,
          position: "right", // 位置
          color: "#CBD2D5",
          fontSize: 12,
          formatter: function (data: any) {
            return data.value;
          },
        }, // 柱子上方的数值
        itemStyle: {
          barBorderRadius: 20,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#00ACFA" },
            { offset: 1, color: "#0070EE" },
          ]),
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.3)",
        },
        data: xDataList,
      },
    ],
  };
  myChart.setOption(option);
  echartsAutoPlay(option, myChart);
}


</script>

<style lang="less" scoped>
.xuqiubox {
  width: 100%;
  border: 1px solid #1f2327;
  padding: 0 10px;
}
.slotImg {
  width: 100%;
  object-fit: cover;
}
.echart-box{
  width: 100%;
  height: 400px;
  clear: both;
  overflow: hidden;
}
#mapBox{
  width: 45%;
  float: left;
  height: 100%;
}
.line-box{
  width: 45%;
  float: right;
  height: 100%;
}
#lineBox{
  width: 100%;
  height: 85%;
}
/deep/ .menu{
  width: 65%;
}
</style>
